const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取js中的css为单独文件 
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css文件 
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// eslint检查js语法 
const EslintWebpackPlugin = require('eslint-webpack-plugin')


// 设置node环境变量
process.env.NODE_ENV = 'production' 

const commonCssLoaders = [
    MiniCssExtractPlugin.loader, 
    'css-loader', 
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: [
                    require('postcss-preset-env')()
                ]
            }
        }
    }
]

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // 处理css资源
            {
                test: /\.css$/,
                use: [...commonCssLoaders]
            },
            // 处理less资源 
            {
                test: /\.less$/,
                use: [ ...commonCssLoaders, 'less-loader' ]
            },
            // 先执行eslint-loader，再执行babel-loader
           {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns: 'usage',
                                corejs: {
                                    version: 3 
                                },
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                        
                    ]
                }
            },
            // 处理样式文件中的图片资源
            {
                test: /\.(jpg|png|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 1 * 1024 
                    }
                },
                generator: {
                    filename: 'static/imgs/[hash:10].[ext]',
                }
            },
            // 处理html中的图片资源，如img标签引入的图片 
            {
                test: /\.html$/,
                loader: 'html-loader',
            },
            // 处理其他资源，file-loader就是将资源文件原封不动地输出出去   
            {
                exclude: /\.(html|js|css|less|jpg|png|jif)$/,
                loader: 'file-loader',
                options: {
                    filename: 'static/media/[hash:10].[ext]'
                }
            }
        ]
    },
    plugins: [
        // html处理 
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true 
            } 
        }),
        // 从js中提取css为单独文件 
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
        }),
        // 压缩css文件 
        new optimizeCssAssetsWebpackPlugin(),
        // eslint 
        new EslintWebpackPlugin({
            extensions: ['js'],
            context: resolve('src'),
            exclude: '/node_modules',
            fix: true // 自动修复不合理写法 
        }) 
    ],
    // npx webpack-dev-server 
    devServer: {
        static: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        open: true, // 自动打开浏览器 
        hot: true // 一个模块更新，只打包这个一模块 
    },
    // mode: 'development'
    // 生产环境会自动压缩js代码 
    mode: 'production' 
}




